import React, { useState, useRef } from 'react';
import './FileImport.css';

const FileImport = ({ onFilesSelect }) => {
  const [isDragOver, setIsDragOver] = useState(false);
  const fileInputRef = useRef(null);
  const folderInputRef = useRef(null);

  const handleDragOver = (e) => {
    e.preventDefault();
    setIsDragOver(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setIsDragOver(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragOver(false);
    
    const files = Array.from(e.dataTransfer.files);
    processFiles(files);
  };

  const handleFileSelect = (e) => {
    const files = Array.from(e.target.files);
    processFiles(files);
    e.target.value = '';
  };

  const processFiles = (files) => {
    const audioFiles = [];
    const subtitleFiles = [];

    files.forEach(file => {
      const fileName = file.name.toLowerCase();
      if (fileName.endsWith('.mp3') || fileName.endsWith('.wav') || fileName.endsWith('.m4a')) {
        audioFiles.push(file);
      } else if (fileName.endsWith('.srt')) {
        subtitleFiles.push(file);
      }
    });

    if (onFilesSelect) {
      onFilesSelect({ audioFiles, subtitleFiles });
    }
  };

  const handleFolderSelect = () => {
    folderInputRef.current?.click();
  };

  const handleFileSelect2 = () => {
    fileInputRef.current?.click();
  };

  return (
    <div className="file-import">
      <div 
        className={`import-area ${isDragOver ? 'drag-over' : ''}`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
      >
        <div className="import-content">
          <div className="import-icon">📁</div>
          <h3>导入音频和字幕文件</h3>
          <p>拖拽文件到此处，或点击下方按钮选择文件</p>
          <div className="supported-formats">
            <span>支持格式：</span>
            <span className="format">MP3, WAV, M4A</span>
            <span>+</span>
            <span className="format">SRT</span>
          </div>
        </div>

        <div className="import-buttons">
          <button 
            className="import-btn primary"
            onClick={handleFolderSelect}
          >
            📂 选择文件夹
          </button>
          <button 
            className="import-btn secondary"
            onClick={handleFileSelect2}
          >
            📄 选择文件
          </button>
        </div>
      </div>

      <input
        ref={fileInputRef}
        type="file"
        multiple
        accept=".mp3,.wav,.m4a,.srt"
        onChange={handleFileSelect}
        style={{ display: 'none' }}
      />

      <input
        ref={folderInputRef}
        type="file"
        multiple
        webkitdirectory="true"
        onChange={handleFileSelect}
        style={{ display: 'none' }}
      />

      <div className="import-tips">
        <h4>💡 使用提示：</h4>
        <ul>
          <li>建议将音频文件和字幕文件放在同一文件夹中</li>
          <li>字幕文件名最好与音频文件名相似，方便自动匹配</li>
          <li>支持拖拽多个文件或整个文件夹</li>
          <li>SRT字幕文件需要采用标准时间格式</li>
        </ul>
      </div>
    </div>
  );
};

export default FileImport;